<template>
	<view style="width: 100%;background-color: white;">
		<view style="width: 100%;min-height: 100vh;overflow-y: auto;">
			<view style="width: 100%;height: auto;">
				<image :src="poster" style="width: 100%;" mode="widthFix"></image>
				<view style="width: 100%;height: 160rpx;display: flex;justify-content: space-between;padding: 0 40rpx;">

					<view style="display: grid;">
						<view style="font-size: 30rpx;font-weight: 600;margin-top: 20rpx;">{{info.name}}</view>
						<view style="display: flex;line-height: 30rpx;">
							<image :src="kanguoUrl" style="width: 30rpx;height: 30rpx;"></image>
							<view style="font-size: 24rpx;color: #9D9D9D;">{{info.click_num}}人看过</view>
						</view>
					</view>

					<view style="display: grid;text-align: center;">
						<view style="font-style: italic;color: #ea5550;font-size: 40rpx;margin-top: 20rpx;">
							￥{{info.price}}

						</view>
						<view
							style="font-style: italic;color: lightgray;text-decoration:line-through;font-size: 24rpx;margin-top: -10rpx;">
							价格￥{{info.original_price}}
						</view>
					</view>
				</view>
				<view style="width: 100%;height: 0.3rpx;background-color: lightgray;"></view>
			</view>

			<view class="u-tabs-box sticky" :style="stickyStyle">
				<utabsswiper activeColor="#ea5550" ref="tabs" :list="list" :current="current" @change="change"
					:fontSize="24" :is-scroll="false" swiperWidth="750"></utabsswiper>
			</view>

			<swiper class="swiper-box" :current="swiperCurrent" :style="{'height':detailHeight + 'px'}"
				@animationfinish="animationfinish">
				<swiper-item class="swiper-item" style="height: 100%;" v-show="swiperCurrent == 0">
					<view style="width: 100%;" class="swiper-item_child">
						<view v-for="(item,index) in detail1">
							<view class="">
								<view style="display: grid;grid-template-areas: 'stack'; ">

									<image :src="item" style="width: 100%;margin: 0rpx 0 0 0;grid-area: stack;"
										mode="widthFix">
									</image>
									<!-- 了解更多优势 -->
									<view v-if="index == 0"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;padding-bottom: 40rpx;">
										<image :src="ljgdys" style="width: 360rpx;" mode="widthFix" @click="showPop()">
										</image>
									</view>
									<!-- 询问是否合适 -->
									<view v-if="index == 1"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;padding-bottom: 40rpx;">
										<image :src="xwsfhs" style="width: 360rpx;" mode="widthFix" @click="showPop()">
										</image>
									</view>
									<!-- 第一个轮播图 -->
									<view v-if="index == 3"
										style="display: flex;justify-content: space-between;align-items: center;width:100%;grid-area: stack;margin-top: 140rpx;">
										<image :src="leftIcon" style="width: 60rpx;height: 60rpx;margin-left: 40rpx;"
											mode="widthFix" @click="jianjian('1')">
										</image>
										<swiper class="swiper" :indicator-dots="indicatorDots" :current="currentIndex1"
											style="width: 100%;height: 100%;" @change="onSwiperChange1"
											:autoplay="autoplay" :interval="interval" :duration="duration">
											<swiper-item v-for="(item,index) in swiperList1" style="width: 100%;"
												@touchmove.stop="stopTouchMove">
												<image :src="item" style="width: 100%;" mode="widthFix">
												</image>
											</swiper-item>
										</swiper>
										<image :src="rightIcon" style="width: 60rpx;height: 60rpx;margin-right: 40rpx;"
											mode="widthFix" @click="jiajia('1')">
										</image>
									</view>
									<!-- 第二个轮播图 -->
									<view v-if="index == 4"
										style="display: flex;justify-content: space-between;align-items: center;width:100%;grid-area: stack;margin-top: 140rpx;">
										<image :src="leftIcon" style="width: 60rpx;height: 60rpx;margin-left: 40rpx;"
											mode="widthFix" @click="jianjian('2')">
										</image>
										<swiper class="swiper" :indicator-dots="indicatorDots" :current="currentIndex2"
											style="width: 100%;height: 100%;" @change="onSwiperChange2"
											:autoplay="autoplay" :interval="interval" :duration="duration">
											<swiper-item v-for="(item,index) in swiperList2" style="width: 100%;"
												@touchmove.stop="stopTouchMove">
												<image :src="item" style="width: 100%;" mode="widthFix">
												</image>
											</swiper-item>
										</swiper>
										<image :src="rightIcon" style="width: 60rpx;height: 60rpx;margin-right: 40rpx;"
											mode="widthFix" @click="jiajia('2')">
										</image>
									</view>
									<!-- 爹妈 -->
									<view v-if="index == 4"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;margin-top: 60rpx;">
										<image :src="diema" style="width: 360rpx;" mode="widthFix" @click="showPop()">
										</image>
									</view>
									<!-- 直播花絮 -->
									<view v-if="index == 8"
										style="display: flex;justify-content: space-between;align-items: center;width:100%;grid-area: stack;margin-top: 30rpx;">
										<image :src="leftIcon" style="width: 60rpx;height: 60rpx;margin-left: 40rpx;"
											mode="widthFix" @click="jianjian('3')">
										</image>
										<swiper class="swiper" :indicator-dots="indicatorDots" :current="currentIndex3"
											style="width: 100%;height: 100%;" @change="onSwiperChange3"
											:autoplay="autoplay" :interval="interval" :duration="duration">
											<swiper-item v-for="(item,i) in zhiboList" @touchmove.stop="stopTouchMove"
												style="width: 100%;height: 740rpx;">
												<video :id="'video1-'+i" :src="item" :poster="zhiboposter[i]" lazy-load
													playsinline webkit-playsinline :show-fullscreen-btn="false"
													:show-center-play-btn="true" :enable-progress-gesture="false"
													@play="playVideo('video1-'+i,item,zhiboposter[i])"
													@loadedmetadata="loadedmetadata" object-fit="cover"
													@error="videoErrorCallback"
													style="width: 100%;height: 81%;border-radius: 16rpx;"
													controls></video>
											</swiper-item>
										</swiper>
										<image :src="rightIcon" style="width: 60rpx;height: 60rpx;margin-right: 40rpx;"
											mode="widthFix" @click="jiajia('3')">
										</image>
									</view>
									<!-- 了解更多直播 -->
									<view v-if="index == 8"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;padding-bottom: 30rpx;">
										<image :src="morezhibo" style="width: 360rpx;" mode="widthFix"
											@click="showPop()">
										</image>
									</view>
									<!-- 俱乐部花絮 -->
									<view v-if="index == 11"
										style="display: flex;justify-content: space-between;width:100%;grid-area: stack;margin-top: 0rpx;">
										<image :src="leftIcon"
											style="width: 60rpx;height: 60rpx;margin-left: 40rpx;margin-top: 120rpx;"
											mode="widthFix" @click="jianjian('4')">
										</image>
										<swiper class="swiper" :indicator-dots="indicatorDots" :current="currentIndex4"
											style="width: 100%;height: 100%;" @change="onSwiperChange4"
											:autoplay="autoplay" :interval="interval" :duration="duration">
											<swiper-item v-for="(item,i) in julebuList" @touchmove.stop="stopTouchMove"
												style="width: 100%;height: 740rpx;margin-top: 20rpx;">
												<video :id="'video2-'+i" :src="item" :poster="julebuposter[i]" lazy-load
													playsinline webkit-playsinline :show-fullscreen-btn="false"
													@loadedmetadata="loadedmetadata" :enable-progress-gesture="false"
													@play="playVideo('video2-'+i,item,julebuposter[i])"
													object-fit="cover" @error="videoErrorCallback"
													style="width: 100%;height: 55%;border-radius: 16rpx;"
													controls></video>
											</swiper-item>
										</swiper>
										<image :src="rightIcon"
											style="width: 60rpx;height: 60rpx;margin-right: 40rpx;margin-top: 120rpx;"
											mode="widthFix" @click="jiajia('4')">
										</image>
									</view>
									<!-- 了解更多俱乐部 -->
									<view v-if="index == 11"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;padding-bottom: 30rpx;">
										<image :src="morejlb" style="width: 360rpx;" mode="widthFix" @click="showPop()">
										</image>
									</view>
									<!-- 了解更多课表 -->
									<!-- 									<view v-if="index == 13"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;padding-bottom: 30rpx;">
										<image :src="kebiao" style="width: 360rpx;" mode="widthFix" @click="showPop()">
										</image>
									</view> -->
								</view>
							</view>
						</view>
						<view style="width: 100%;text-align: center;grid-area: stack;align-self: end;">
							<image :src="kebiao" style="width: 360rpx;" mode="widthFix" @click="showPop()">
							</image>
						</view>
						<view v-for="(item,j) in detail2">
							<view class="">
								<view style="display: grid;grid-template-areas: 'stack'; ">

									<image :src="item" style="width: 100%;margin: 0rpx 0 0 0;grid-area: stack;"
										mode="widthFix">
									</image>

									<view v-if="j == 1"
										style="display: flex;justify-content: space-between;align-items: center;width:100%;grid-area: stack;margin-top: -20rpx;">
										<image :src="leftIcon" style="width: 60rpx;height: 60rpx;margin-left: 40rpx;"
											mode="widthFix" @click="jianjian('5')">
										</image>
										<swiper class="swiper" :indicator-dots="indicatorDots" :current="currentIndex5"
											style="width: 100%;height: 100%;" @change="onSwiperChange5"
											:autoplay="autoplay" :interval="interval" :duration="duration">
											<swiper-item v-for="(item,index) in swiperList3" style="width: 100%;"
												@touchmove.stop="stopTouchMove">
												<image :src="item" style="width: 100%;" mode="widthFix">
												</image>
											</swiper-item>
										</swiper>
										<image :src="rightIcon" style="width: 60rpx;height: 60rpx;margin-right: 40rpx;"
											mode="widthFix" @click="jiajia('5')">
										</image>
									</view>

									<view v-if="j == 2"
										style="display: flex;justify-content: space-between;align-items: center;width:100%;grid-area: stack;margin-top: 10rpx;">
										<image :src="leftIcon" style="width: 60rpx;height: 60rpx;margin-left: 40rpx;"
											mode="widthFix" @click="jianjian('6')">
										</image>
										<swiper class="swiper" :indicator-dots="indicatorDots" :current="currentIndex6"
											style="width: 100%;height: 100%;" @change="onSwiperChange6"
											:autoplay="autoplay" :interval="interval" :duration="duration">
											<swiper-item v-for="(item,index) in swiperList4" style="width: 100%;"
												@touchmove.stop="stopTouchMove">
												<image :src="item" style="width: 100%;" mode="widthFix">
												</image>
											</swiper-item>
										</swiper>
										<image :src="rightIcon" style="width: 60rpx;height: 60rpx;margin-right: 40rpx;"
											mode="widthFix" @click="jiajia('6')">
										</image>
									</view>
									<!-- 了解更多学员作品 -->
									<view v-if="j == 2"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;padding-bottom: 30rpx;">
										<image :src="ljgdxyzp" style="width: 360rpx;" mode="widthFix"
											@click="showPop()">
										</image>
									</view>
									<view v-if="j == 3"
										style="display: flex;justify-content: space-between;align-items: center;width:100%;grid-area: stack;margin-top: 10rpx;">
										<image :src="leftIcon" style="width: 60rpx;height: 60rpx;margin-left: 40rpx;"
											mode="widthFix" @click="jianjian('7')">
										</image>
										<swiper class="swiper" :indicator-dots="indicatorDots" :current="currentIndex7"
											style="width: 100%;height: 100%;" @change="onSwiperChange7"
											:autoplay="autoplay" :interval="interval" :duration="duration">
											<swiper-item v-for="(item,index) in swiperList5" style="width: 100%;"
												@touchmove.stop="stopTouchMove">
												<image :src="item" style="width: 100%;" mode="widthFix">
												</image>
											</swiper-item>
										</swiper>
										<image :src="rightIcon" style="width: 60rpx;height: 60rpx;margin-right: 40rpx;"
											mode="widthFix" @click="jiajia('7')">
										</image>
									</view>
									<!-- 了解学员接单情况 -->
									<view v-if="j == 3"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;padding-bottom: 60rpx;">
										<image :src="ljxyjdqk" style="width: 360rpx;" mode="widthFix"
											@click="showPop()">
										</image>
									</view>
								</view>
							</view>
						</view>
						<view v-for="(item,k) in detail3">
							<view class="">
								<view style="display: grid;grid-template-areas: 'stack'; ">

									<image :src="item" style="width: 100%;margin: 0rpx 0 0 0;grid-area: stack;"
										mode="widthFix">
									</image>

									<view v-if="k == 1"
										style="display: flex;justify-content: space-between;align-items: center;width:100%;grid-area: stack;margin-top: 50rpx;">
										<image :src="leftIcon" style="width: 60rpx;height: 60rpx;margin-left: 40rpx;"
											mode="widthFix" @click="jianjian('8')">
										</image>
										<swiper class="swiper" :indicator-dots="indicatorDots" :current="currentIndex8"
											style="width: 100%;height: 100%;" @change="onSwiperChange8"
											:autoplay="autoplay" :interval="interval" :duration="duration">
											<swiper-item v-for="(item,index) in swiperList6" style="width: 100%;"
												@touchmove.stop="stopTouchMove">
												<image :src="item" style="width: 100%;" mode="widthFix">
												</image>
											</swiper-item>
										</swiper>
										<image :src="rightIcon" style="width: 60rpx;height: 60rpx;margin-right: 40rpx;"
											mode="widthFix" @click="jiajia('8')">
										</image>
									</view>
									<view v-if="k == 2"
										style="display: flex;justify-content: space-between;align-items: center;width:100%;grid-area: stack;margin-top: 10rpx;">
										<image :src="leftIcon" style="width: 60rpx;height: 60rpx;margin-left: 40rpx;"
											mode="widthFix" @click="jianjian('9')">
										</image>
										<swiper class="swiper" :indicator-dots="indicatorDots" :current="currentIndex9"
											style="width: 100%;height: 100%;" @change="onSwiperChange9"
											:autoplay="autoplay" :interval="interval" :duration="duration">
											<swiper-item v-for="(item,i) in mingxingList"
												@touchmove.stop="stopTouchMove" style="width: 100%;height: 740rpx;">
												<video :id="'video6-'+i" :src="item" lazy-load
													:poster="mingxingposter[i]" playsinline webkit-playsinline
													:show-fullscreen-btn="false" @loadedmetadata="loadedmetadata"
													:enable-progress-gesture="false"
													@play="playVideo('video6-'+i,item,mingxingposter[i])"
													object-fit="cover" @error="videoErrorCallback"
													style="width: 100%;height: 80%;border-radius: 16rpx;"
													controls></video>
											</swiper-item>
										</swiper>
										<image :src="rightIcon" style="width: 60rpx;height: 60rpx;margin-right: 40rpx;"
											mode="widthFix" @click="jiajia('9')">
										</image>
									</view>
									<!-- 了解更多学员评价 -->
									<view v-if="k == 2"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;padding-bottom: 60rpx;">
										<image :src="ljgdxypj" style="width: 360rpx;" mode="widthFix"
											@click="showPop()">
										</image>
									</view>
								</view>
							</view>
						</view>
						<view v-for="(item,l) in detail4">
							<view class="">
								<view style="display: grid;grid-template-areas: 'stack'; ">

									<image :src="item" style="width: 100%;margin: 0rpx 0 0 0;grid-area: stack;"
										@click="addTeacher(l)" mode="widthFix">
									</image>
									<!-- 了解更多器材选择 -->
									<view v-if="l == 1"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;padding-bottom: 40rpx;">
										<image :src="ljgdqcxz" style="width: 360rpx;" mode="widthFix"
											@click="showPop()">
										</image>
									</view>
									<!-- 了解更多蚂蚁自媒体账号 -->
									<view v-if="l == 3"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;padding-bottom: 40rpx;">
										<image :src="ljgdmyzmtzh" style="width: 360rpx;" mode="widthFix"
											@click="showPop()">
										</image>
									</view>
									<!-- 更多大白话视频 -->
									<view v-if="l == 5"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;padding-bottom: 40rpx;">
										<image :src="gddbhsp" style="width: 360rpx;" mode="widthFix" @click="showPop()">
										</image>
									</view>
									<view v-if="l == 9"
										style="display: flex;justify-content: space-between;align-items: center;width:100%;grid-area: stack;margin-top: 10rpx;">
										<image :src="leftIcon" style="width: 60rpx;height: 60rpx;margin-left: 40rpx;"
											mode="widthFix" @click="jianjian('10')">
										</image>
										<swiper class="swiper" :indicator-dots="indicatorDots" :current="currentIndex10"
											style="width: 100%;height: 100%;" @change="onSwiperChange10"
											:autoplay="autoplay" :interval="interval" :duration="duration">
											<swiper-item v-for="(item,index) in swiperList7" style="width: 100%;"
												@touchmove.stop="stopTouchMove">
												<image :src="item" style="width: 100%;" mode="widthFix">
												</image>
											</swiper-item>
										</swiper>
										<image :src="rightIcon" style="width: 60rpx;height: 60rpx;margin-right: 40rpx;"
											mode="widthFix" @click="jiajia('10')">
										</image>
									</view>
									<!-- 大白话书 -->
									<view v-if="l == 7"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;padding-bottom: -10rpx;">
										<image :src="dabaihua" style="width: 360rpx;" mode="widthFix"
											@click="showPop()">
										</image>
									</view>
									<!-- 与老师交流 -->
									<view v-if="l == 8"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;padding-bottom: 0rpx;">
										<image :src="jiaoliu" style="width: 360rpx;" mode="widthFix" @click="showPop()">
										</image>
									</view>
									<!-- 了解老师更多作品风格 -->
									<view v-if="l == 9"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;padding-bottom: 40rpx;">
										<image :src="ljlsgdzpfg" style="width: 360rpx;" mode="widthFix"
											@click="showPop()">
										</image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item class="swiper-item" style="height: 100%;" v-show="swiperCurrent == 1">
					<view>
						<image :src="renshi" style="width: 100%;" mode="widthFix"></image>
					</view>
				</swiper-item>
				<swiper-item class="swiper-item" style="height: 100%;" v-show="swiperCurrent == 2">
					<view style="width: 100%;" class="swiper-item_child">

						<view v-for="(item,j) in detail2">
							<view class="">
								<view style="display: grid;grid-template-areas: 'stack'; ">

									<image :src="item" style="width: 100%;margin: 0rpx 0 0 0;grid-area: stack;"
										mode="widthFix">
									</image>

									<view v-if="j == 1"
										style="display: flex;justify-content: space-between;align-items: center;width:100%;grid-area: stack;margin-top: -20rpx;">
										<image :src="leftIcon" style="width: 60rpx;height: 60rpx;margin-left: 40rpx;"
											mode="widthFix" @click="jianjian('5')">
										</image>
										<swiper class="swiper" :indicator-dots="indicatorDots" :current="currentIndex5"
											style="width: 100%;height: 100%;" @change="onSwiperChange5"
											:autoplay="autoplay" :interval="interval" :duration="duration">
											<swiper-item v-for="(item,index) in swiperList3" style="width: 100%;"
												@touchmove.stop="stopTouchMove">
												<image :src="item" style="width: 100%;" mode="widthFix">
												</image>
											</swiper-item>
										</swiper>
										<image :src="rightIcon" style="width: 60rpx;height: 60rpx;margin-right: 40rpx;"
											mode="widthFix" @click="jiajia('5')">
										</image>
									</view>
									<view v-if="j == 2"
										style="display: flex;justify-content: space-between;align-items: center;width:100%;grid-area: stack;margin-top: 10rpx;">
										<image :src="leftIcon" style="width: 60rpx;height: 60rpx;margin-left: 40rpx;"
											mode="widthFix" @click="jianjian('6')">
										</image>
										<swiper class="swiper" :indicator-dots="indicatorDots" :current="currentIndex6"
											style="width: 100%;height: 100%;" @change="onSwiperChange6"
											:autoplay="autoplay" :interval="interval" :duration="duration">
											<swiper-item v-for="(item,index) in swiperList4" style="width: 100%;"
												@touchmove.stop="stopTouchMove">
												<image :src="item" style="width: 100%;" mode="widthFix">
												</image>
											</swiper-item>
										</swiper>
										<image :src="rightIcon" style="width: 60rpx;height: 60rpx;margin-right: 40rpx;"
											mode="widthFix" @click="jiajia('6')">
										</image>
									</view>
									<!-- 了解更多学员作品 -->
									<view v-if="j == 2"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;padding-bottom: 30rpx;">
										<image :src="ljgdxyzp" style="width: 360rpx;" mode="widthFix"
											@click="showPop()">
										</image>
									</view>
									<view v-if="j == 3"
										style="display: flex;justify-content: space-between;align-items: center;width:100%;grid-area: stack;margin-top: 10rpx;">
										<image :src="leftIcon" style="width: 60rpx;height: 60rpx;margin-left: 40rpx;"
											mode="widthFix" @click="jianjian('7')">
										</image>
										<swiper class="swiper" :indicator-dots="indicatorDots" :current="currentIndex7"
											style="width: 100%;height: 100%;" @change="onSwiperChange7"
											:autoplay="autoplay" :interval="interval" :duration="duration">
											<swiper-item v-for="(item,index) in swiperList5" style="width: 100%;"
												@touchmove.stop="stopTouchMove">
												<image :src="item" style="width: 100%;" mode="widthFix">
												</image>
											</swiper-item>
										</swiper>
										<image :src="rightIcon" style="width: 60rpx;height: 60rpx;margin-right: 40rpx;"
											mode="widthFix" @click="jiajia('7')">
										</image>
									</view>
									<!-- 了解学员接单情况 -->
									<view v-if="j == 3"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;padding-bottom: 60rpx;">
										<image :src="ljxyjdqk" style="width: 360rpx;" mode="widthFix"
											@click="showPop()">
										</image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>

				<swiper-item class="swiper-item" style="height: 100%;" v-show="swiperCurrent == 3">
					<view style="width: 100%;" class="swiper-item_child">

						<view v-for="(item,k) in detail_xypj">
							<view class="">
								<view style="display: grid;grid-template-areas: 'stack'; ">

									<image :src="item" style="width: 100%;margin: 0rpx 0 0 0;grid-area: stack;"
										mode="widthFix">
									</image>

									<view v-if="k == 1"
										style="display: flex;justify-content: space-between;align-items: center;width:100%;grid-area: stack;margin-top: 50rpx;">
										<image :src="leftIcon" style="width: 60rpx;height: 60rpx;margin-left: 40rpx;"
											mode="widthFix" @click="jianjian('8')">
										</image>
										<swiper class="swiper" :indicator-dots="indicatorDots" :current="currentIndex8"
											style="width: 100%;height: 100%;" @change="onSwiperChange8"
											:autoplay="autoplay" :interval="interval" :duration="duration">
											<swiper-item v-for="(item,index) in swiperList6" style="width: 100%;"
												@touchmove.stop="stopTouchMove">
												<image :src="item" style="width: 100%;" mode="widthFix">
												</image>
											</swiper-item>
										</swiper>
										<image :src="rightIcon" style="width: 60rpx;height: 60rpx;margin-right: 40rpx;"
											mode="widthFix" @click="jiajia('8')">
										</image>
									</view>
									<view v-if="k == 2"
										style="display: flex;justify-content: space-between;align-items: center;width:100%;grid-area: stack;margin-top: 10rpx;">
										<image :src="leftIcon" style="width: 60rpx;height: 60rpx;margin-left: 40rpx;"
											mode="widthFix" @click="jianjian('6')">
										</image>
										<swiper class="swiper" :indicator-dots="indicatorDots" :current="currentIndex6"
											style="width: 100%;height: 100%;" @change="onSwiperChange6"
											:autoplay="autoplay" :interval="interval" :duration="duration">
											<swiper-item v-for="(item,index) in swiperList4" style="width: 100%;"
												@touchmove.stop="stopTouchMove">
												<image :src="item" style="width: 100%;" mode="widthFix">
												</image>
											</swiper-item>
										</swiper>
										<image :src="rightIcon" style="width: 60rpx;height: 60rpx;margin-right: 40rpx;"
											mode="widthFix" @click="jiajia('6')">
										</image>
									</view>
									<!-- 了解更多学员评价 -->
									<view v-if="k == 2"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;padding-bottom: 60rpx;">
										<image :src="ljgdxypj" style="width: 360rpx;" mode="widthFix"
											@click="showPop()">
										</image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item class="swiper-item" style="height: 100%;" v-show="swiperCurrent == 4">
					<view style="width: 100%;" class="swiper-item_child">

						<view v-for="(item,l) in laoshiDetails">
							<view class="">
								<view style="display: grid;grid-template-areas: 'stack'; ">

									<image :src="item" style="width: 100%;margin: 0rpx 0 0 0;grid-area: stack;"
										mode="widthFix">
									</image>

									<view v-if="l == 1"
										style="display: flex;justify-content: space-between;align-items: center;width:100%;grid-area: stack;margin-top: 10rpx;">
										<image :src="leftIcon" style="width: 60rpx;height: 60rpx;margin-left: 40rpx;"
											mode="widthFix" @click="jianjian('10')">
										</image>
										<swiper class="swiper" :indicator-dots="indicatorDots" :current="currentIndex10"
											style="width: 100%;height: 100%;" @change="onSwiperChange10"
											:autoplay="autoplay" :interval="interval" :duration="duration">
											<swiper-item v-for="(item,index) in swiperList7" style="width: 100%;"
												@touchmove.stop="stopTouchMove">
												<image :src="item" style="width: 100%;" mode="widthFix">
												</image>
											</swiper-item>
										</swiper>
										<image :src="rightIcon" style="width: 60rpx;height: 60rpx;margin-right: 40rpx;"
											mode="widthFix" @click="jiajia('10')">
										</image>
									</view>
									<!-- 了解老师更多作品风格 -->
									<view v-if="l == 1"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;padding-bottom: 40rpx;">
										<image :src="ljlsgdzpfg" style="width: 360rpx;" mode="widthFix"
											@click="showPop()">
										</image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>

				<swiper-item class="swiper-item" style="height: 100%;" v-show="swiperCurrent == 5">
					<view style="width: 100%;" class="swiper-item_child">

						<view v-for="(item,index) in diemaDetails">
							<view class="">
								<view style="display: grid;grid-template-areas: 'stack'; ">

									<image :src="item" style="width: 100%;margin: 0rpx 0 0 0;grid-area: stack;"
										mode="widthFix">
									</image>

									<!-- 第一个轮播图 -->
									<view v-if="index == 1"
										style="display: flex;justify-content: space-between;align-items: center;width:100%;grid-area: stack;margin-top: 140rpx;">
										<image :src="leftIcon" style="width: 60rpx;height: 60rpx;margin-left: 40rpx;"
											mode="widthFix" @click="jianjian('1')">
										</image>
										<swiper class="swiper" :indicator-dots="indicatorDots" :current="currentIndex1"
											style="width: 100%;height: 100%;" @change="onSwiperChange1"
											:autoplay="autoplay" :interval="interval" :duration="duration">
											<swiper-item v-for="(item,index) in swiperList1" style="width: 100%;"
												@touchmove.stop="stopTouchMove">
												<image :src="item" style="width: 100%;" mode="widthFix">
												</image>
											</swiper-item>
										</swiper>
										<image :src="rightIcon" style="width: 60rpx;height: 60rpx;margin-right: 40rpx;"
											mode="widthFix" @click="jiajia('1')">
										</image>
									</view>
									<!-- 第二个轮播图 -->
									<view v-if="index == 2"
										style="display: flex;justify-content: space-between;align-items: center;width:100%;grid-area: stack;margin-top: 140rpx;">
										<image :src="leftIcon" style="width: 60rpx;height: 60rpx;margin-left: 40rpx;"
											mode="widthFix" @click="jianjian('2')">
										</image>
										<swiper class="swiper" :indicator-dots="indicatorDots" :current="currentIndex2"
											style="width: 100%;height: 100%;" @change="onSwiperChange2"
											:autoplay="autoplay" :interval="interval" :duration="duration">
											<swiper-item v-for="(item,index) in swiperList2" style="width: 100%;"
												@touchmove.stop="stopTouchMove">
												<image :src="item" style="width: 100%;" mode="widthFix">
												</image>
											</swiper-item>
										</swiper>
										<image :src="rightIcon" style="width: 60rpx;height: 60rpx;margin-right: 40rpx;"
											mode="widthFix" @click="jiajia('2')">
										</image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item class="swiper-item" style="height: 100%;" v-show="swiperCurrent == 6">
					<view style="width: 100%;" class="swiper-item_child">

						<view v-for="(item,index) in julebuDetails">
							<view class="">
								<view style="display: grid;grid-template-areas: 'stack'; ">

									<image :src="item" style="width: 100%;margin: 0rpx 0 0 0;grid-area: stack;"
										mode="widthFix">
									</image>

									<!-- 俱乐部花絮 -->
									<view v-if="index == 0"
										style="display: flex;justify-content: space-between;width:100%;grid-area: stack;margin-top: 0rpx;">
										<image :src="leftIcon"
											style="width: 60rpx;height: 60rpx;margin-left: 40rpx;margin-top: 120rpx;"
											mode="widthFix" @click="jianjian('4')">
										</image>
										<swiper class="swiper" :indicator-dots="indicatorDots" :current="currentIndex4"
											style="width: 100%;height: 100%;" @change="onSwiperChange4"
											:autoplay="autoplay" :interval="interval" :duration="duration">
											<swiper-item v-for="(item,i) in julebuList" @touchmove.stop="stopTouchMove"
												style="width: 100%;height: 740rpx;margin-top: 20rpx;">
												<video :id="'video5-'+i" :src="item" :poster="julebuposter[i]" lazy-load
													playsinline webkit-playsinline :show-fullscreen-btn="false"
													@loadedmetadata="loadedmetadata" :enable-progress-gesture="false"
													@play="playVideo('video5-'+i,item,julebuposter[i])"
													object-fit="cover" @error="videoErrorCallback"
													style="width: 100%;height: 55%;border-radius: 16rpx;"
													controls></video>
											</swiper-item>
										</swiper>
										<image :src="rightIcon"
											style="width: 60rpx;height: 60rpx;margin-right: 40rpx;margin-top: 120rpx;"
											mode="widthFix" @click="jiajia('4')">
										</image>
									</view>
									<!-- 了解更多俱乐部 -->
									<view v-if="index == 0"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;padding-bottom: 30rpx;">
										<image :src="morejlb" style="width: 360rpx;" mode="widthFix" @click="showPop()">
										</image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view :class=" platform == 'ios' ? 'bottomView_ios' : 'bottomView'">
			<view class="zxls" @click="toZxls('1')" style="border-right: 1rpx solid lightgray;">
				<view class="bottomImg">
					<view>
						<image :src="zxlsUrl">
						</image>
					</view>
					<view>咨询老师</view>
				</view>
			</view>
			<view class="zxls" @click="toZxls('2')" style="border-right: 1rpx solid lightgray;">
				<view class="bottomImg">
					<view>
						<image :src="dagangUrl">
						</image>
					</view>
					<view>领取大纲</view>
				</view>
			</view>
			<view class="zxls" @click="toZxls('3')" style="border-right: 1rpx solid lightgray;">
				<view class="bottomImg">
					<view>
						<image :src="youhuiUrl">
						</image>
					</view>
					<view>领取优惠</view>
				</view>
			</view>
			<!-- 			<view class="zxls" @click="buyNow()">
				<view class="bottomImg">
					<view>
						<image :src="lijigoumai">
						</image>
					</view>
					<view>立即购买</view>
				</view>
			</view> -->
		</view>
		<delayPop ref="vipPop"></delayPop>
		<videoPlayer ref="videoPlayer">
		</videoPlayer>
	</view>
</template>
<script>
	const app = getApp();
	const comUrl = "https://pic.mae.vip/%E4%BA%BA%E5%83%8F%E5%AE%9E%E6%88%98%E7%8F%AD%E7%B4%A0%E6%9D%90/";

	import {
		addClickRecord,
		getCourseTypeDetail,
		addCourseLearnRecord,
		getWechatURLLink,
	} from '@/api/home.js';

	import {
		loginMobile,
	} from "@/api/user";
	import {
		mapGetters
	} from "vuex";

	import animationType from '@/utils/animationType.js'
	import utabsswiper from '../backup/h-tabs-swiper.vue';
	import delayPop from '../backup/delayPop.vue';
	import videoPlayer from '../backup/videoPlayer.vue';

	export default {
		components: {
			utabsswiper,
			delayPop,
			videoPlayer
		},
		props: {
			userId: {
				type: String,
				required: true
			},
			token: {
				type: String,
				required: true
			},
			couId: {
				type: String,
				required: true
			},
		},
		data() {
			return {
				lijigoumai: require('../../../static/images/portraitMaster/lijigoumai.png'),
				currentIndex1: 0,
				currentIndex2: 0,
				currentIndex3: 0,
				currentIndex4: 0,
				currentIndex5: 0,
				currentIndex6: 0,
				currentIndex7: 0,
				currentIndex8: 0,
				currentIndex9: 0,
				currentIndex10: 0,
				renshi: 'https://pic.mae.vip//crmebimage/public/maintain/2025/08/28/e42d66d27f4c40e692d91ef9b4be04b2vdqrf72uer.png',
				julebuposter: [comUrl + 'jp1.png',
					comUrl + 'jp2.png',
					comUrl + 'jp3.png',
					comUrl + 'jp4.png',
					comUrl + 'jp5.png',
					comUrl + 'jp6.png',
					comUrl + 'jp7.png',
				],
				zhiboposter: [comUrl + 'zp1.png',
					comUrl + 'zp2.png',
					comUrl + 'zp3.png',
					comUrl + 'zp4.png',
					comUrl + 'zp5.png',
				],
				ljgdys: comUrl + 'ljgdys.jpg',
				xwsfhs: comUrl + 'xwsfhs.jpg',
				ljgdxyzp: comUrl + 'ljgdxyzp.jpg',
				ljxyjdqk: comUrl + 'ljxyjdqk.jpg',
				ljgdxypj: comUrl + 'ljgdxypj.png',
				ljgdqcxz: comUrl + 'ljgdqcxz.jpg',
				ljgdmyzmtzh: comUrl + 'ljgdmyzmtzh.jpg',
				gddbhsp: comUrl + 'gddbhsp.jpg',
				ljlsgdzpfg: comUrl + 'ljlsgdzpfg.jpg',
				dabaihua: comUrl + 'dabaihua.jpg',
				diema: comUrl + 'diema.jpg',
				jiaoliu: comUrl + 'jiaoliu.jpg',
				kebiao: comUrl + 'kebiao.jpg',
				morejlb: comUrl + 'morejlb.jpg',
				morezhibo: comUrl + 'morezhibo.jpg',
				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				kanguoUrl: comUrl + 'kanguo.png',
				zxlsUrl: comUrl + 'wechat.png',
				dagangUrl: comUrl + 'dagang.png',
				youhuiUrl: comUrl + 'youhui.png',
				screenWidth: uni.getSystemInfoSync().screenWidth,
				detailHeight: 0,
				maxHeight1: 0,
				maxHeight2: 0,
				maxHeight3: 0,
				maxHeight4: 0,
				maxHeight5: 0,
				maxHeight6: 0,
				maxHeight222: 0,
				dagangHeight: 0,
				dagang: [],
				detail: [],
				detail1: [comUrl + 'm_01.jpg',
					comUrl + 'm_02.jpg',
					comUrl + 'm_03.jpg',
					comUrl + 'm_04.jpg',
					comUrl + 'm_05.jpg',
					comUrl + 'm_06.jpg',
					comUrl + 'm_07.jpg',
					comUrl + 'm_08.jpg',
					comUrl + 'm_09.jpg',
					comUrl + 'm_10.jpg',
					comUrl + 'm_11.jpg',
					comUrl + 'm_12.jpg',
					comUrl + 'm_13.jpg',
					comUrl + 'm_14.jpg'
				],
				diemaDetails: [comUrl + 'm_03.jpg',
					comUrl + 'm_04.jpg',
					comUrl + 'm_05.jpg',
					comUrl + 'm_06.jpg',
					comUrl + 'm_07.jpg',
					comUrl + 'm_08.jpg',
				],
				julebuDetails: [comUrl + 'm_12.jpg'],
				detail2: [comUrl + 'n_01.jpg',
					comUrl + 'n_02.jpg',
					comUrl + 'n_03.jpg',
					comUrl + 'n_04.jpg'
				],
				detail3: [comUrl + 'o_01.jpg',
					comUrl + 'o_02.jpg',
					comUrl + 'o_03.jpg',
				],
				detail_xypj: [comUrl + 'o_01.jpg',
					comUrl + 'o_02.jpg',
				],
				detail4: [comUrl + 's_01.jpg',
					comUrl + 's_02.jpg', comUrl +
					's_03.jpg',
					comUrl + 's_04.jpg', comUrl +
					's_05.jpg',
					comUrl + 's_06.jpg', comUrl +
					's_07.jpg',
					comUrl + 's_08.jpg', comUrl +
					's_09.jpg',
					comUrl + 's_10.jpg', comUrl +
					's_11.jpg'
				],
				laoshiDetails: [comUrl + 's_09.jpg',
					comUrl + 's_10.jpg'
				],
				swiperList1: [comUrl + 's10.png',
					comUrl + 's11.png',
					comUrl + 's12.png',
					comUrl + 's13.png',
					comUrl + 's14.png',
					comUrl + 's15.png',
					comUrl + 's16.png',
					comUrl + 's17.png'
				],
				swiperList2: [comUrl + 's20.png',
					comUrl + 's21.png',
					comUrl + 's22.png',
					comUrl + 's23.png',
					comUrl + 's24.png',
					comUrl + 's25.png',
					comUrl + 's26.png',
					comUrl + 's27.png'
				],
				swiperList3: [comUrl + 'n1.png',
					comUrl + 'n2.png',
					comUrl + 'n3.png',
					comUrl + 'n4.png',
					comUrl + 'n5.png',
					comUrl + 'n6.png',
					comUrl + 'n7.png',
					comUrl + 'n8.png',
					comUrl + 'n9.png',
					comUrl + 'n10.png',
				],
				swiperList4: [comUrl + 'p1.jpg',
					comUrl + 'p2.jpg',
					comUrl + 'p3.jpg',
					comUrl + 'p4.jpg',
					comUrl + 'p5.jpg',
					comUrl + 'p6.jpg',
					comUrl + 'p7.jpg',
					comUrl + 'p8.jpg',
					comUrl + 'p9.jpg',
					comUrl + 'p10.jpg',
				],
				swiperList5: [comUrl + 'q1.png',
					comUrl + 'q2.png',
					comUrl + 'q3.png',
					comUrl + 'q4.png',
					comUrl + 'q5.png',
					comUrl + 'q6.png'
				],
				swiperList6: [comUrl + 'r1.png',
					comUrl + 'r2.png',
					comUrl + 'r3.png',
					comUrl + 'r4.png',
					comUrl + 'r5.png',
					comUrl + 'r6.png',
					comUrl + 'r7.png',
					comUrl + 'r8.png',
				],
				swiperList7: [comUrl + 't1.png',
					comUrl + 't2.png',
					comUrl + 't3.png',
					comUrl + 't4.png',
					comUrl + 't5.png',
					comUrl + 't6.png',
					comUrl + 't7.png',
					comUrl + 't8.png',
					comUrl + 't9.png',
					comUrl + 't10.png',
					comUrl + 't11.png',
				],
				zhiboList: [
					'https://avideo.mae.vip/sv/1caf3a7e-1970c17236c/1caf3a7e-1970c17236c.mp4',
					'https://avideo.mae.vip/sv/468b391e-1970c17233d/468b391e-1970c17233d.mp4',
					'https://avideo.mae.vip/sv/279aae54-1970c172324/279aae54-1970c172324.mp4',
					'https://avideo.mae.vip/sv/5c0ed049-1970c172352/5c0ed049-1970c172352.mp4',
					'https://avideo.mae.vip/sv/36ee8209-1970c172345/36ee8209-1970c172345.mp4',
				],
				julebuList: [
					'https://avideo.mae.vip/sv/1feb7424-1970b615a70/1feb7424-1970b615a70.mp4',
					'https://avideo.mae.vip/sv/ab9bf95-1970b615a8f/ab9bf95-1970b615a8f.mp4',
					'https://avideo.mae.vip/sv/225170de-1970b615aa8/225170de-1970b615aa8.mp4',
					'https://avideo.mae.vip/sv/18684212-1970b615a8d/18684212-1970b615a8d.mp4',
					'https://avideo.mae.vip/sv/64bc2136-1970b615a72/64bc2136-1970b615a72.mp4',
					'https://avideo.mae.vip/sv/62778a49-1970b618efd/62778a49-1970b618efd.mp4',
					'https://avideo.mae.vip/sv/2e64ee88-1970b61de9e/2e64ee88-1970b61de9e.mp4'
				],
				mingxingList: [
					'https://avideo.mae.vip/sv/52b96d0e-1970b658871/52b96d0e-1970b658871.mp4',
					'https://avideo.mae.vip/sv/4e7400f7-1970b66d56d/4e7400f7-1970b66d56d.mp4',
					'https://avideo.mae.vip/sv/160b5bef-1970b66c046/160b5bef-1970b66c046.mp4',
					'https://avideo.mae.vip/sv/209ee25f-1970b658814/209ee25f-1970b658814.mp4',
					'https://avideo.mae.vip/sv/59f9cdb1-1970b66d52f/59f9cdb1-1970b66d52f.mp4',
					'https://avideo.mae.vip/sv/3688af31-1970b658861/3688af31-1970b658861.mp4',
					'https://avideo.mae.vip/sv/347df171-1970b658829/347df171-1970b658829.mp4'
				],
				mingxingposter: [comUrl + "l1.jpeg",
					comUrl + "l2.jpeg",
					comUrl + "l3.jpeg",
					comUrl + "l4.jpeg",
					comUrl + "l5.jpeg",
					comUrl + "l6.jpeg",
					comUrl + "l7.jpeg"
				],
				leftIcon: comUrl + "lefticon.jpg",
				rightIcon: comUrl + "righticon.jpg",
				poster: "",
				info: {},
				current: 0,
				swiperCurrent: 0,
				list: [{
					name: '简介'
				}, {
					name: '课程大纲'
				}, {
					name: '学员作品'
				}, {
					name: '学员评价'
				}, {
					name: '老师作品'
				}, {
					name: '爹妈式辅导'
				}, {
					name: '俱乐部花絮'
				}],
				platform: uni.getSystemInfoSync().platform,
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				allVideoId: [],
				scrollDistabce: 0,
				scrollPercent: 0,
				timer: 0, // 计时器的时间
				intervalId: null, // 定时器的 ID
				stickyStyle: '',
			}
		},
		mounted: function() {
			let that = this;
			console.log('22计时器:', that.userId);
			that.getCourseTypeDetail();
			that.calcHeight();

			if (that.intervalId) return; // 防止重复启动
			that.intervalId = setInterval(() => {
				that.timer++;
				//console.log('计时器:', this.timer);
			}, 1000);

			window.viewCourseRecord = (param) => {
				console.log('hahaha');
				that.viewMyCourseRecord(param);
			};
			window.aabbcc = function() {
				console.log('aabbcc-Hello');
			};

			uni.$on('pageScroll', (scrollTop) => {
				//console.log('scrollTop=== ', scrollTop);
				if (scrollTop > 300) { // 滚动超过300时吸顶
					that.stickyStyle = 'position: fixed; top: 0; width: 100%; z-index: 999;';
				} else {
					that.stickyStyle = '';
				}
				if (scrollTop > that.scrollDistabce) {
					that.scrollDistabce = scrollTop;
					//that.scrollPercent = ((that.scrollDistabce / that.maxHeight1) * 100 * 1000).toFixed(2);
					that.scrollPercent = ((that.scrollDistabce / that.maxHeight1) * 100).toFixed(0);
					//console.log('百分比1--:', that.scrollDistabce);
					//console.log('百分比2--:', that.maxHeight1);
					//console.log('百分比3--:', that.scrollPercent);
					//that.viewMyCourseRecord();
				}
			});
		},
		beforeDestroy() {
			uni.$off('pageScroll'); // 避免内存泄漏
		},
		methods: {
			viewMyCourseRecord(pp) {
				console.log('viewMyCourseRecord调用成功');
				let that = this;

				let p = {};

				if (that.scrollPercent < 1) {
					that.scrollPercent = 1;
				}
				if (that.scrollPercent > 100) {
					that.scrollPercent = 100;
				}
				p.jindu = that.scrollPercent;
				p.times = that.timer;
				p.userId = that.userId;
				p.token = that.token;
				p.secId = '0';
				p.couId = that.couId;
				addCourseLearnRecord(p).then(res => {
					if (res.code == 0) {
						// that.$util.Tips({
						// 	title: '保存成功',
						// 	icon: 'success'
						// });
					}
				})
			},
			addTeacher(l) { //最后一张图 抢购
				let that = this;
				let platform = uni.getSystemInfoSync().platform; //手机类型
				if (l == that.detail4.length - 1) {
					if (platform == 'ios') {
						window.webkit.messageHandlers.goWechat.postMessage("");
					}
					if (platform == 'android') {
						window.location.href = 'goWechat';
					}
				}
			},
			stopTouchMove() {
				return false;
			},
			loadedmetadata(e) {
				let that = this;
				// 获取所有视频的 id
				//console.log(e.target.id)
				if (that.allVideoId.indexOf(e.target.id) == -1) {
					that.allVideoId.push(e.target.id);
				}
				const video = document.querySelector('video');
				if (video) {

					video.setAttribute('webkit-playsinline', 'true');
					video.setAttribute('playsinline', 'true');
				}
			},
			playVideo(id, url, poster) {
				let that = this;

				for (let i = 0; i < that.allVideoId.length; i++) {

					if (that.allVideoId[i] != id) {
						uni.createVideoContext(that.allVideoId[i].toString()).pause(); // 暂停其他视频
					} else {
						console.log(id)
						// const videoContext = uni.createVideoContext('myVideo', this);
						// videoContext.play(); // 内联播放

						if (that.platform == 'ios') {
							// uni.createVideoContext(that.allVideoId[i].toString()).pause(); // 内联播放
							// let params = {
							// 	'playUrl': url,
							// 	'poster': poster,
							// }
							// that.$refs.videoPlayer.sendUrl(params);
							uni.createVideoContext(that.allVideoId[i].toString()).play(); // 内联播放

						} else {
							uni.createVideoContext(that.allVideoId[i].toString()).play(); // 内联播放
						}

					}
				}
			},
			jianjian(f) {
				let that = this;
				if (f == '1') {
					if (that.currentIndex1 > 0) {
						that.currentIndex1--;
					}
				} else if (f == '2') {
					if (that.currentIndex2 > 0) {
						that.currentIndex2--;
					}
				} else if (f == '3') {
					if (that.currentIndex3 > 0) {
						that.currentIndex3--;
					}
				} else if (f == '4') {
					if (that.currentIndex4 > 0) {
						that.currentIndex4--;
					}
				} else if (f == '5') {
					if (that.currentIndex5 > 0) {
						that.currentIndex5--;
					}
				} else if (f == '6') {
					if (that.currentIndex6 > 0) {
						that.currentIndex6--;
					}
				} else if (f == '7') {
					if (that.currentIndex7 > 0) {
						that.currentIndex7--;
					}
				} else if (f == '8') {
					if (that.currentIndex8 > 0) {
						that.currentIndex8--;
					}
				} else if (f == '9') {
					if (that.currentIndex9 > 0) {
						that.currentIndex9--;
					}
				} else if (f == '10') {
					if (that.currentIndex10 > 0) {
						that.currentIndex10--;
					}
				}
			},
			jiajia(f) {
				let that = this;
				if (f == '1') {
					if (that.currentIndex1 < that.swiperList1.length - 1) {
						that.currentIndex1++;
					}
				} else if (f == '2') {
					if (that.currentIndex2 < that.swiperList2.length - 1) {
						that.currentIndex2++;
					}
				} else if (f == '3') {
					if (that.currentIndex3 < that.zhiboList.length - 1) {
						that.currentIndex3++;
					}
				} else if (f == '4') {
					if (that.currentIndex4 < that.julebuList.length - 1) {
						that.currentIndex4++;
					}
				} else if (f == '5') {
					if (that.currentIndex5 < that.swiperList3.length - 1) {
						that.currentIndex5++;
					}
				} else if (f == '6') {
					if (that.currentIndex6 < that.swiperList4.length - 1) {
						that.currentIndex6++;
					}
				} else if (f == '7') {
					if (that.currentIndex7 < that.swiperList5.length - 1) {
						that.currentIndex7++;
					}
				} else if (f == '8') {
					if (that.currentIndex8 < that.swiperList6.length - 1) {
						that.currentIndex8++;
					}
				} else if (f == '9') {
					if (that.currentIndex9 < that.mingxingList.length - 1) {
						that.currentIndex9++;
					}
				} else if (f == '10') {
					if (that.currentIndex10 < that.swiperList7.length - 1) {
						that.currentIndex10++;
					}
				}
			},
			onSwiperChange1(e) {
				this.currentIndex1 = e.detail.current;
			},
			onSwiperChange2(e) {
				this.currentIndex2 = e.detail.current;
			},
			onSwiperChange3(e) {
				this.currentIndex3 = e.detail.current;
			},
			onSwiperChange4(e) {
				this.currentIndex4 = e.detail.current;
			},
			onSwiperChange5(e) {
				this.currentIndex5 = e.detail.current;
			},
			onSwiperChange6(e) {
				this.currentIndex6 = e.detail.current;
			},
			onSwiperChange7(e) {
				this.currentIndex7 = e.detail.current;
			},
			onSwiperChange8(e) {
				this.currentIndex8 = e.detail.current;
			},
			onSwiperChange9(e) {
				this.currentIndex9 = e.detail.current;
			},
			onSwiperChange10(e) {
				this.currentIndex10 = e.detail.current;
			},
			showPop() {
				let that = this;
				that.$refs.vipPop.showPop();
			},
			buyNow() {
				let that = this;
				//phone=%@&userId=%@&ver=%@&buyId=%@&buyPrice=%@&buyName=%@"
				//that.phone = decodeURI(that.jqueryUrl(locatiojUrl).phone);--
				//that.userId = decodeURI(that.jqueryUrl(locatiojUrl).userId);--
				//that.buyId = decodeURI(that.jqueryUrl(locatiojUrl).buyId);--
				//that.buyPrice = decodeURI(that.jqueryUrl(locatiojUrl).buyPrice);--
				//that.buyName = decodeURIComponent(that.jqueryUrl(locatiojUrl).buyName);

				uni.navigateTo({
					animationType: animationType.type,
					animationDuration: animationType.duration,
					url: '/pages/app_orderCourse/index?buyId=' + that
						.couId + '&buyPrice=' + that.info.price +
						'&userId=' + that
						.userId +
						'&source=' + '1' +
						'&phone=' + '13012562102' +
						'&buyName=' + that.info.name,
				})
			},
			toZxls(i) {
				let that = this;
				that.addClick();

				let platform = uni.getSystemInfoSync().platform; //手机类型

				if (platform == 'ios') {
					window.webkit.messageHandlers.goWechat.postMessage("");
				}
				if (platform == 'android') {
					window.location.href = 'goWechat';
				}
			},
			addClick() {
				let that = this;
				let pp = {};
				let type = '人像实战班-咨询老师';
				pp.userId = that.userId;
				pp.token = that.token;
				pp.platform = that.platform == 'ios' ? '苹果' : '安卓';
				pp.type = type;
				addClickRecord(pp).then(res => {

				})
			},
			getCourseTypeDetail() {
				let that = this;
				let pp = {};
				pp.userId = that.userId;
				pp.token = that.token;
				pp.couId = that.couId;
				getCourseTypeDetail(pp).then(res => {
					if (res.code == 0) {
						that.info = res.data.info;
						that.poster = res.data.poster;
					}
				})
			},
			change(current) {
				let that = this;
				that.$refs.tabs.setFinishCurrent(current);
				that.swiperCurrent = current;
				that.current = current;
			},
			transition({
				detail: {
					dx
				}
			}) {
				let that = this;
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				let that = this;
				that.$refs.tabs.setFinishCurrent(current);
				that.swiperCurrent = current;
				that.current = current;

				//重新计算高速
				if (current == 0) {
					that.detailHeight = that.maxHeight1;
				} else if (current == 1) {
					that.detailHeight = that.maxHeight222;
				} else if (current == 2) {
					that.detailHeight = that.maxHeight2;
				} else if (current == 3) {
					that.detailHeight = that.maxHeight3;
				} else if (current == 4) {
					that.detailHeight = that.maxHeight4;
				} else if (current == 5) {
					that.detailHeight = that.maxHeight5;
				} else if (current == 6) {
					that.detailHeight = that.maxHeight6;
				}
			},
			videoErrorCallback: function(e) {
				//e.target.errMsg
			},
			calcHeight() {
				let that = this;
				that.detailHeight = 200;
				that.maxHeight1 = 200;
				that.maxHeight2 = 60;
				that.maxHeight3 = 40;
				that.maxHeight4 = 60;
				that.maxHeight5 = 60;
				that.maxHeight6 = 60;
				that.maxHeight222 = 60;
				for (let i = 0; i < that.detail1.length; i++) {
					uni.getImageInfo({
						src: that.detail1[i], // 图片路径
						success: (res) => {
							let w = res.width;
							let h = res.height;
							let hhh = that.screenWidth * h / w;
							that.detailHeight = that.detailHeight + hhh;
							that.maxHeight1 = that.maxHeight1 + hhh;
							//console.log('获取图片信息:', that.maxHeight1);
						},
						fail: (err) => {
							console.error('获取图片信息失败:', err);
						}
					});
				}
				for (let i = 0; i < that.detail2.length; i++) {
					uni.getImageInfo({
						src: that.detail2[i], // 图片路径
						success: (res) => {
							let w = res.width;
							let h = res.height;
							let hhh = that.screenWidth * h / w;
							that.detailHeight = that.detailHeight + hhh;
							that.maxHeight1 = that.maxHeight1 + hhh;
							that.maxHeight2 = that.maxHeight2 + hhh;
						},
						fail: (err) => {
							console.error('获取图片信息失败:', err);
						}
					});
				}
				for (let i = 0; i < that.detail3.length; i++) {
					uni.getImageInfo({
						src: that.detail3[i], // 图片路径
						success: (res) => {
							let w = res.width;
							let h = res.height;
							let hhh = that.screenWidth * h / w;
							that.detailHeight = that.detailHeight + hhh;
							that.maxHeight1 = that.maxHeight1 + hhh;
						},
						fail: (err) => {
							console.error('获取图片信息失败:', err);
						}
					});
				}
				for (let i = 0; i < that.detail_xypj.length; i++) {
					uni.getImageInfo({
						src: that.detail_xypj[i], // 图片路径
						success: (res) => {
							let w = res.width;
							let h = res.height;
							let hhh = that.screenWidth * h / w;
							that.maxHeight3 = that.maxHeight3 + hhh;
						},
						fail: (err) => {
							console.error('获取图片信息失败:', err);
						}
					});
				}
				for (let i = 0; i < that.detail4.length; i++) {
					uni.getImageInfo({
						src: that.detail4[i], // 图片路径
						success: (res) => {
							let w = res.width;
							let h = res.height;
							let hhh = that.screenWidth * h / w;
							that.detailHeight = that.detailHeight + hhh;
							that.maxHeight1 = that.maxHeight1 + hhh;
						},
						fail: (err) => {
							console.error('获取图片信息失败:', err);
						}
					});
				}

				for (let i = 0; i < that.laoshiDetails.length; i++) {
					uni.getImageInfo({
						src: that.laoshiDetails[i], // 图片路径
						success: (res) => {
							let w = res.width;
							let h = res.height;
							let hhh = that.screenWidth * h / w;
							that.maxHeight4 = that.maxHeight4 + hhh;
						},
						fail: (err) => {
							console.error('获取图片信息失败:', err);
						}
					});
				}

				for (let i = 0; i < that.diemaDetails.length; i++) {
					uni.getImageInfo({
						src: that.diemaDetails[i], // 图片路径
						success: (res) => {
							let w = res.width;
							let h = res.height;
							let hhh = that.screenWidth * h / w;
							that.maxHeight5 = that.maxHeight5 + hhh;
						},
						fail: (err) => {
							console.error('获取图片信息失败:', err);
						}
					});
				}
				for (let i = 0; i < that.julebuDetails.length; i++) {
					uni.getImageInfo({
						src: that.julebuDetails[i], // 图片路径
						success: (res) => {
							let w = res.width;
							let h = res.height;
							let hhh = that.screenWidth * h / w;
							that.maxHeight6 = that.maxHeight6 + hhh;
						},
						fail: (err) => {
							console.error('获取图片信息失败:', err);
						}
					});
				}

				uni.getImageInfo({
					src: that.renshi, // 图片路径
					success: (res) => {
						let w = res.width;
						let h = res.height;
						let hhh = that.screenWidth * h / w;
						that.maxHeight222 = that.maxHeight222 + hhh;
						console.log('maxHeight222:', that.maxHeight222);
					},
					fail: (err) => {
						console.error('获取图片信息失败:', err);
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	page,
	body {
		// height: 100%;
		// width: 100%;
		background-color: white;
	}

	/deep/.uni-video-cover-play-button {
		background-image: url('../../../static/images/portraitMaster/btns/playicon.jpg') !important;
	}

	/deep/.uni-video-cover-play-button {
		width: 80px;
		height: 80px;
		background-size: 100%;
	}

	/deep/uni-swiper .uni-swiper-dots-horizontal {
		bottom: 40px !important;
	}

	/deep/uni-swiper .uni-swiper-dot-active {
		background: #ea5550;
	}

	/deep/uni-swiper .uni-swiper-dot {
		width: 6px;
		height: 6px;
	}

	.uni-margin-wrap {
		width: 100%;
		// height: 1000rpx !important;
		height: auto;
	}

	.bottomImg {
		display: grid;
		margin-top: 20rpx;
		font-size: 24rpx;

		image {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.canScroll {
		overflow-y: scroll;
	}

	.canntScroll {
		overflow-y: hidden;
	}

	.bottomView_ios {
		width: 100%;
		height: 140rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: white;
		display: flex;
		border-top: 1rpx solid lightgray;
	}

	.bottomView {
		width: 100%;
		height: 140rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: white;
		display: flex;
		border-top: 1rpx solid lightgray;
	}

	.zxls {
		// margin-top: 10rpx;
		width: 33.33%;
		height: 100%;
		text-align: center;
	}

	.swiper-box {
		// flex: 1;
		height: 100%;
		//margin: 30rpx;
		// padding: 30rpx;
	}

	.sticky-box {
		display: flex;
		position: -webkit-sticky;
		position: sticky;

		z-index: 9999;
		flex-direction: row;
		margin: 0px;
		background: #f5f5f5;
	}
</style>